<template>
	<view class="home">
		<!-- indicator-dots指示点  circular滑动-->
		<swiper indicator-dots circular autoplay ="true">
			<swiper-item v-for="item in LunBo" :key ="item.id">
				<!-- 动态绑定 -->
				<image :src="item.img"></image>
			</swiper-item>
		</swiper>
		<!-- 导航栏开始 -->
		<view class="nav">
			<view class="nav_item" v-for="(item,index) in nav" :key="index"  @click="navClick(item.path)">
				<view :class="item.icon"></view>
				<text>{{item.tittle}}</text>
			</view>
			<!-- <view class="nav_item">
				<view class="iconfont icon-guanyuwomen"></view>
				<text>联系我们</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-tupian"></view>
				<text>社区图片</text>
			</view>
			<view class="nav_item">
				<view class="iconfont icon-shipin"></view>
				<text>学习视频</text>
			</view> -->
		</view>
		<!-- 导航栏结束 -->
		
		<!-- 商品推荐区域开始 -->
		<view class="hot_goods">
			<view class="tit">商品推荐</view>
			<!-- 使用组件 -->
			<goods-list :prodect="prodect"></goods-list>
			<!-- <view class="goods_list">
				<view class="goods_item" v-for="item in prodect" :key ="item.id">
					<image :src="item.img_url"></image>
					<view class="price">
						<text>￥{{item.sell_price}}</text>
						<text>￥{{item.market_price}}</text>
					</view>
					<view class="name">{{item.title}}</view>
				</view>
			</view> -->
		</view>
		<!-- 商品推荐区域结束 -->
		
	</view>
</template>

<script>
	// 导入详情组件
	import goodsList from "../../components/goods-list/goods-list.vue"
	export default {
		data() {
			return {
				// 定义数组
				LunBo:[],
				prodect:[],
				nav:[
					{
						icon:"iconfont icon-ziyuan",
						tittle:"商品列表",
						path:"/pages/goods/goods"
					},{
						icon:"iconfont icon-guanyuwomen",
						tittle:"联系我们",
						path:"/pages/tellme/tellme"
					},{
						icon:"iconfont icon-tupian",
						tittle:"社区图片",
						path:"/pages/pics/pics"
					},{
						icon:"iconfont icon-shipin",
						tittle:"学习视频",
						path:"/pages/videos/videos"
					}
				]
			}
		},
		// 页面加载时触发
		onLoad() {
			// 调用方法
			this.getLunBo()
			this.getProdect()
		},
		// 注册组件
		components:{
			"goods-list":goodsList
		},
		// 下拉刷新
		onPullDownRefresh(){
			this.prodect =[],
			this.getLunBo()
			this.getProdect()
			setTimeout(()=>{
				this.getLunBo()
				this.getProdect()
			},1000)
		},
		methods: {
			// 获取轮播图
			async getLunBo(){
				// 发送请求获取轮播图
				// uni.request({
				// 	// 请求地址
				// 	url:"/api/getlunbo",
				// 	// 成功
				// 	success:res =>{
				// 		console.log(res)
				// 		// 判断请求是否成功
				// 		if(res.data!==0){
				// 			return uni.showToast({
				// 				title:"获取数据失败!"
				// 			})
				// 		}
				// 		// 把数据绑定给数组里面
				// 		this.LunBo =res.data.message
				// 	}
				// })
				const res =await this.$MyRequest({
					url:"/api/getlunbo"
				})
				console.log(res)
				// 把数据绑定给数组里面
						this.LunBo =res.data.message
			},
			// 商品热门商品
			async getProdect(){
				const res =await this.$MyRequest({
					url:"/api/getgoods?pageindex=1"
				})
				this.prodect =res.data.message
				uni.stopPullDownRefresh()
				console.log(res)
			},
			navClick(url){
				 uni.navigateTo({
				 	url
				 })
				 console.log(url)
			}
		}
	}
</script>

<style lang="scss">
	.home{
		swiper{
			width: 750rpx;
			height: 380rpx;
			image{
				height: 100%;
				width: 100%;
			}
		}
		// 导航栏
		.nav{
			display: flex;
			.nav_item{
				width: 25%;
				text-align: center;
				view{
					width: 120rpx;
					height: 120rpx;
					background: red;
					border-radius: 60rpx;
					// 背景居中
					margin: 10px auto;
					line-height: 120rpx;
					color: white;
					font-size: 50rpx;
				}
				.icon-tupian{
					font-size: 45rpx;
				}
				.text{
					font-size: 30rpx;
				}
			}
		}
		// 推荐区域样式
		.hot_goods{
			overflow: hidden;
			background: #eee;
			margin-top: 10px;
			.tit{
				height: 50px;
				line-height: 50px;
				color: red;
				text-align: center;
				letter-spacing: 20px;
				background: white;
				margin: 10rpx 0;
			}
			// goods_item price name
			// .goods_list{
			// 	padding: 0 10rpx;
			// 	display: flex;
			// 	flex-wrap: wrap;
			// 	justify-content: space-between;
			// 	.goods_item{
			// 		background: white;
			// 		width: 355rpx;
			// 		padding: 15rpx;
			// 		box-sizing: border-box;
			// 		image{
			// 			width: 80%;
			// 			height: 150px;
			// 			display: block;
			// 			margin: auto;
			// 		}
			// 		.price{
			// 			color: red;
			// 			font-size: 36rpx;
			// 			margin: 20rpx 0 5rpx 0;
			// 			text:nth-child(2){
			// 				color: gray;
			// 				font-size: 28rpx;
			// 				margin-left: 17rpx;
			// 				text-decoration: line-through;
			// 			}
			// 		}
			// 		.name{
			// 			font-size: 28rpx;
			// 			line-height: 50rpx;
			// 			padding-bottom: 15rpx;
			// 			padding-top: 10rpx;
			// 		}
			// 	}
			// }
		}
	}
</style>
